import { pcsControllerControlPcs, pcsControllerGetPcsInfos } from '@/services/ess/devicePcs';
import { useModel } from '@@/exports';
import { Button, Form, InputNumber, message, Modal, Select, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';

const PCSControl: React.FC = () => {
  const intl = useIntl();
  const { confirm } = Modal;
  const { initialState } = useModel('@@initialState');
  const [pcsOptions, setPcsOptions] = useState<any[]>([]);
  const [defaultValue, setDefaultValue] = useState<string>('');
  const [YGPower, setYGPower] = useState<number>(0);
  const [WGPower, setWGPower] = useState<number>(0);
  const styles = { width: 223 };
  const changePCS = (value: string) => {
    setDefaultValue(value);
  };
  /**
   * 参数下发
   * @param powerType
   * powerType 1 为有功，2为无功
   */
  const sendOrder = (powerType: number) => {
    const params = {
      pcsCode: defaultValue,
      ygPower: YGPower,
      wgPower: WGPower,
      powerType: powerType,
    };
    pcsControllerControlPcs(params).then((res) => {
      console.log('pcsControllerControlPcs', res);
      if (res.success) {
        message.success(
          intl.formatMessage({ id: 'strategyControl.temporalStrategy.sentSuccessfully' }),
        );
      }
    });
  };
  useEffect(() => {
    pcsControllerGetPcsInfos({ stationId: initialState?.stationId }).then((res) => {
      if (res.data && res.data.length > 0) {
        setPcsOptions(res.data);
        setDefaultValue(res.data[0].code);
      }
    });
  }, []);
  return (
    <>
      <div>
        <Form
          colon={false}
          layout={'horizontal'}
          labelCol={{
            flex: `0 0 160px`,
          }}
          style={{ marginTop: 10 }}
        >
          <Form.Item label={intl.formatMessage({ id: 'stationRealtimeMonitoring.name' })}>
            <Select
              style={styles}
              options={pcsOptions}
              value={defaultValue}
              placeholder={intl.formatMessage({ id: 'siteManage.selectPlease' })}
              fieldNames={{
                label: 'name',
                value: 'code',
              }}
              onChange={changePCS}
            ></Select>
          </Form.Item>
          <Form.Item
            label={intl.formatMessage({ id: 'stationRealtimeMonitoring.targetActivePower' })}
          >
            <Space>
              <InputNumber
                value={YGPower}
                placeholder={intl.formatMessage({
                  id: 'systemManagement.requiredFields.numericalValueOnly',
                })}
                style={styles}
                precision={6}
                onChange={(value: number) => {
                  setYGPower(value);
                }}
              ></InputNumber>
              <Button
                style={{
                  width: '90px',
                  height: '40px',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                type={'primary'}
                onClick={() => {
                  confirm({
                    title: intl.formatMessage({ id: 'global.prompt' }),
                    content: intl.formatMessage({
                      id: 'systemManagement.neddTochange.confirmParamDispatch',
                    }),
                    onOk() {
                      sendOrder(1);
                    },
                  });
                }}
              >
                {intl.formatMessage({ id: 'systemManagement.neddTochange.paramDispatch' })}
              </Button>
            </Space>
          </Form.Item>
          <Form.Item
            label={intl.formatMessage({ id: 'stationRealtimeMonitoring.targetReactivePower' })}
          >
            <Space>
              <InputNumber
                value={WGPower}
                placeholder={intl.formatMessage({
                  id: 'systemManagement.neddTochange.placeintoValue',
                })}
                style={styles}
                precision={6}
                onChange={(value: number) => {
                  setWGPower(value);
                }}
              ></InputNumber>
              <Button
                style={{
                  width: '90px',
                  height: '40px',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                type={'primary'}
                onClick={() => {
                  confirm({
                    title: intl.formatMessage({ id: 'global.prompt' }),
                    content: intl.formatMessage({
                      id: 'systemManagement.neddTochange.confirmParamDispatch',
                    }),
                    onOk() {
                      sendOrder(2);
                    },
                  });
                }}
              >
                参数下发
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </>
  );
};

export default PCSControl;
